<template>
  <div class="container">
    <div class="box">
      <!-- 侧边图片区域 -->
      <div class="pic"></div>
      <!-- 登录表单区域 -->
      <div class="loginForm">
        <h2>用户登录</h2>
        <el-form
          ref="loginFormRef"
          :model="loginFormData"
          :rules="loginFormRules"
          label-width="80px"
        >
          <el-form-item prop="name">
            <el-input
              v-model="loginFormData.name"
              :loginIpt="isFocusIpt1"
              @focus="isFocusIpt1 = true"
              @blur="isFocusIpt1 = 'false'"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="psd">
            <el-input
              v-model="loginFormData.psd"
              :loginIpt="isFocusIpt2"
              @focus="isFocusIpt2 = true"
              @blur="isFocusIpt2 = 'false'"
              type="password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-button for="login" size="lognBtn" @click="login">登录</el-button>
        </el-form>
        <div class="division">
          <div class="divisionText">或者使用电子邮箱登录</div>
        </div>
        <div class="otherWay">
          <div>
            <el-button for="weixin" size="lognBtn">微信登录</el-button>
          </div>
          <div>
            <el-button for="weibo" size="lognBtn">微博登录</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      loginFormData: {
        name: "",
        psd: "",
      },
      loginFormRules: {
        name: [{ required: true, message: "请输入用户名称", trigger: "blur" }],
        psd: [{ required: true, message: "请输入用户名称", trigger: "blur" }],
      },
      isFocusIpt1: "false",
      isFocusIpt2: "false",
    };
  },
  methods: {
    // 表单验证与页面跳转
    login() {
      this.$refs.loginFormRef.validate((bool) => {
        if (bool) {
          this.$router.push("/home");
        } else {
          this.$notify({
            title: "tips",
            message: "只设置了不能为空的表单验证，输入任意内容即可进入",
            offset: 100
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100vh;
  background-color: rgb(247, 250, 252);
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  display: flex;
  width: 950px;
  height: 600px;
  border-radius: 20px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}
.pic {
  flex: 5;
  background-image: url(../assets/Login/bg.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: rgb(235, 244, 255);
}
.el-button {
  width: 260px;
  height: 45px;
  margin: 0 auto;
  font-size: 12px;
  color: white;
}
.loginForm {
  flex: 4;
  background-color: white;
  padding-top: 70px;
  h2 {
    text-align: center;
    margin-bottom: 30px;
  }
  .el-form {
    text-align: center;
    margin-bottom: 30px;
  }
  .el-input {
    width: 260px;
    height: 45px;
    font-size: 10px;
    margin-left: -80px;
  }
  .el-button[for="login"] {
    background-color: rgb(102, 126, 234);
  }
}
.division {
  border-bottom: 1px solid rgb(226, 232, 240);
  display: flex;
  justify-content: center;
  align-items: center;
}
.divisionText {
  display: inline-block;
  padding: 10px;
  color: #718096;
  font-size: 12px;
  background: white;
  text-align: center;
  transform: translateY(20px);
}
.otherWay {
  margin-top: 30px;
  text-align: center;
  .el-button[for="weixin"] {
    background-color: rgb(235, 244, 255);
    color: black;
    font-weight: 700;
    background-image: url(../assets/Login/weixin.png);
    background-repeat: no-repeat;
    background-size: 26px 26px;
    background-position: 70px 8px;
  }
  .el-button[for="weibo"] {
    background-color: rgb(235, 244, 255);
    margin-top: 20px;
    color: black;
    font-weight: 700;
    background-image: url(../assets/Login/weibo.png);
    background-repeat: no-repeat;
    background-size: 26px 26px;
    background-position: 70px 8px;
  }
}
</style>
